<template>
	<view class="typechoice">
		<view class="choice spaceBetween">
			<view class="choiceState spaceEvenly" @click="onOff = true">
				<view class="text">{{ JSON.stringify(data) == '{}' ? '全部' : '筛选' }}</view>
				<image class="expand" src="/static/images/group/expand.png" mode=""></image>
			</view>
			<searchview @input="input" v-model="search"></searchview>
		</view>
		<view class="echo">
			<view class="item flex" v-for="(i, index) in data">
				<view class="text">
					{{ i.keyword }}
				</view>
				<image class="colse" @click="del(index)" src="/static/images/colse.png" mode=""></image>
			</view>
		</view>
		
		
		<view class="list" v-show="onOff">
			<view class="shadow" @click="onOffswitch"></view>
			<view class="box">
				<view class="header spaceBetween">
					<view class=""></view>
					<view class="txt">人脉圈筛选</view>
					<image class="colse" @click="onOffswitch" src="/static/images/colse.png" mode=""></image>
				</view>
				<view class="item" v-for="(i, index) in tagList">
					<view class="title">
						{{ i.tag }}
					</view>
					<view class="nameList flex">
						<view class="i_item" @click="choiceItem(i, i_item)" :class="tagClass(i, i_item)" v-for="(i_item, i_index) in i.tag_name">
							{{ i_item }}
						</view>
					</view>
				</view>
				<view class="btn" @click="confirmFiltering">确认筛选</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import searchview from './search.vue';
	export default {
		name: 'typechoice',
		components: {
			searchview,
		},
		props: {
			list: {
				type: Array,
				default: () => [],
			},
		},
		watch: {
			list: {
				handler(newVal) {
					this.tagList = newVal;
				},
				immediate: true,
			},
		},
		data() {
			return {
				tagList: [],
				search: null,
				data: {},
				onOff: false,
			};
		},
		created() {},
		methods: {
			onOffswitch() {
				this.onOff = !this.onOff;
			},
			tagClass(item, i_item) {
				if (this.data[item.key_name]?.keyword === i_item) {
					return 'i_itemAct';
				}
				return;
			},
			confirmFiltering() {
				this.onOff = false;
				this.subEmit();
			},
			input(e) {
				this.search = e;
				this.subEmit();
			},
			del(index){
				delete this.data[index]
				this.$forceUpdate();
				this.subEmit();
			},
			choiceItem(item, i_item) {
				if (this.data[item.key_name]) {
					delete this.data[item.key_name];
				} else {
					this.data[item.key_name] = { keyword: i_item, key_name: item.key_name };
				}
				this.$forceUpdate();
			},
			subEmit() {
				let keyList = [];
				if (JSON.stringify(this.data) != '{}') {
					keyList = JSON.stringify(Object.values(this.data));
				}
				this.$emit('choice', { search: this.search, keyList });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.typechoice {
		.choice {
			margin: $margin-width auto;
			width: $connet-width;
			.choiceState {
				width: 118rpx;
				height: 60rpx;
				background: #ffffff;
				border-radius: 30rpx;
				align-items: center;
				color: #000000;

				.text {
					font-size: $uni-font-size-12;
				}
				.expand {
					width: 13.55rpx;
					height: 8.11rpx;
				}
			}
		}
		.echo {
			width: $connet-width;
			margin: 0 auto;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;

			.item {
				margin: $submargin-width;
				margin-left: 0;
				// line-height: 40rpx;
				padding: 0 15rpx;
				border-radius: 20rpx;
				color: #999999;
				font-size: $uni-font-size-12;
				border: 1rpx solid #707070;
				align-items: center;

				.colse {
					margin-left: 10rpx;
					width: 14rpx;
					height: 14rpx;
				}
			}
		}
		.list {
			.shadow {
				position: fixed;
				width: 100vw;
				height: 100vh;
				background: #707070;
				opacity: 0.6;
				top: 0;
				left: 0;
				z-index: 99;
			}
			.box {
				width: 690rpx;
				height: auto;
				background: #ffffff;
				padding: 30rpx;
				border-radius: 20rpx 20rpx 0 0;
				background-color: #ffffff;
				position: fixed;
				z-index: 1000;
				bottom: 0;
				left: 0;
				padding-bottom: env(safe-area-inset-bottom);
				.header {
					align-items: center;

					.txt {
						font-size: $uni-font-size-14;
						color: #000000;
					}
					.colse {
						width: 28rpx;
						height: 28rpx;
					}
				}
				.item {
					width: 100%;
					overflow: hidden;
					.title {
						margin-top: $margin-width;
						color: #000000;
						font-size: $uni-font-size-13;
					}
					.nameList {
						width: 100%;
						flex-wrap: wrap;
						.i_item {
							width: auto;
							text-align: center;
							border-radius: 20rpx;
							padding: 10rpx 15rpx;
							font-size: $uni-font-size-12;
							margin: $submargin-width;
							margin-left: 0;
						}
						.i_itemAct {
							color: #ffffff;
							background: #1fc28b;
						}
					}
				}
				.btn {
					width: 689rpx;
					height: 80rpx;
					background: #1fc28b;
					border-radius: 40rpx;
					line-height: 80rpx;
					font-size: $uni-font-size-15;
					text-align: center;
					color: #ffffff;
					margin-bottom: 30rpx;
				}
			}
		}
	}
</style>